﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../js/echarts.js"></script>
</head>
<body bgcolor="#000000">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:500px;background-color:#000000;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        //option = ; 
        function getData(a,b,c) {
           // option.series[0].data[0].value = a;//(Math.random() * 100).toFixed(2) - 0;
            myChart.setOption({
                tooltip: {
                    formatter: "{a} <br/>{b} : {c}%"
                },
                toolbox: {
                    feature: {
                        // restore: {},
                        //  saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '业务指标',
                        type: 'gauge',
                        center: ['50%', '50%'],
                        // startAngle: 90,
                        // endAngle: -140,

                        min: 0,
                        max: c,
                        axisLine: {            // 坐标轴线
                            show: true,        // 默认显示，属性show控制显示与否
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.2, '#ff4500'], [0.4, 'orange'], [0.6, 'skyblue'], [0.8, 'lightgreen'],[1, 'green']],
                                width: 30
                            }
                        },
                        pointer: {
                            length: '80%',
                            width: 8,
                            color: 'auto'
                        },
                        title: {
                            show: true,
                            offsetCenter: ['-5%', 210],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: '#fff',
                                fontSize: 38
                            }
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            show: true,
                            formatter: function (v) {
                                switch (v + '') {                                  
                                    case '0': return '0';
                                    case c / 10 + '': return  '弱';
                                    case c * 2 / 10 + '': return c * 2 / 10 + '';
                                    case c * 3 / 10 + '': return '低';
                                    case c * 4 / 10 + '': return c * 4 / 10 + '';
                                    case c * 5 / 10 + '': return '中';
                                    case c * 6 / 10 + '': return c * 6 / 10 + '';
                                    case c * 7 / 10 + '': return '高';
                                    case c * 8 / 10 + '': return c * 8 / 10 + '';
                                    case c * 9 / 10 + '': return  '强';
                                    case c * 10 / 10 + '': return c * 10 / 10 + '';                                    
                                    default: return '';
                                }
                            },
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: '#fff',
                                fontSize: 20
                            }
                        },
                        detail: {
                            show: true,
                            backgroundColor: 'rgba(0,0,0,0)',
                            borderWidth: 0,
                            borderColor: '#ccc',
                            width: 100,
                            height: 40,
                            offsetCenter: ['-0%', 140],       // x, y，单位px
                            formatter: '{value}',
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: 'auto',
                                fontSize: 40
                            }
                        },
                        //  detail: { formatter: '{value}%' },
                        data: [{ value: a , name: b }]
                    }
                ]
            }, true);
            window.onresize = myChart.resize
        }
    </script>
</body>
</html>